<template>
    <view>
        <!-- 筛选 -->
        <view class="filter">
            <text class="active">综合</text>
            <text>销量</text>
            <text>价格</text>
        </view>

        <!-- 商品列表 -->
        <scroll-view @scrolltolower="getMore" class="goods" scroll-y>
            <view
                v-for="item in list"
                :key="item.goods_id"
                class="item"
                @click="goDetail(item.goods_id)"
            >
                <!-- 商品图片 -->
                <image class="pic" :src="item.goods_small_logo"></image>
                <!-- 商品信息 -->
                <view class="meta">
                    <view class="name">{{ item.goods_name }}</view>
                    <view class="price">
                        <text>￥</text>{{ item.goods_price }}<text>.00</text>
                    </view>
                </view>
            </view>
        </scroll-view>

        <!-- 列表加载完成显示 -->
        <view class="nomore" v-if="nomore">没有更多数据...</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            // 分页
            query: {
                pagenum: 1,
                pagesize: 20,
                query: "",
            },
            total: 0,
        };
    },

    computed: {
        nomore() {
            return this.total === this.list.length;
        },
    },

    methods: {
        goDetail(id) {
            uni.navigateTo({
                url: `/pages/goods/index?id=${id}`,
            });
        },

        // 根据搜索获取列表数据
        async getList(data) {
            const { meta: msg, message: _d } = await this.request({
                url: "/api/public/v1/goods/search",
                data,
            });

            this.total = _d.total;
            if (msg.status === 200) {
                this.list.push(..._d.goods);
            }
        },

        //
        getMore() {
            if (this.nomore) return;
            this.query.pagenum++;
            this.getList(this.query);
        },
    },

    onLoad(params) {
        console.log(params);
        this.query.query = params.query;
        this.getList(params);
    },
};
</script>

<style scoped lang="less">
.filter {
    display: flex;
    height: 96rpx;
    line-height: 96rpx;
    border-bottom: 1rpx solid #ddd;

    /* #ifdef H5 */
    position: relative;
    z-index: 99;
    /* #endif */

    text {
        flex: 1;
        text-align: center;
        font-size: 30rpx;
        color: #333;

        &.active {
            color: #ea4451;
        }
    }
}

.goods {
    position: absolute;
    width: 100%;
    top: 97rpx;
    bottom: 0;
}

.item {
    display: flex;
    padding: 30rpx 20rpx 30rpx 0;
    margin-left: 20rpx;
    border-bottom: 1rpx solid #eee;

    &:last-child {
        border-bottom: none;
    }

    .pic {
        width: 200rpx;
        height: 200rpx;
        margin-right: 30rpx;
    }

    .meta {
        flex: 1;
        font-size: 27rpx;
        color: #333;
        position: relative;
    }

    .name {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .price {
        position: absolute;
        bottom: 0;

        color: #ea4451;
        font-size: 33rpx;

        text {
            font-size: 22rpx;
        }
    }
}
</style>
